<template>
    <div class="w" style="padding-bottom: 64px;">
        <div class="btitle" v-if="signalsRadio1.T_lxrLiss.length >0">为你找到{{ signalsRadio1.T_lxrLiss.length }}个公司联系人</div>
        <div style="padding: 20px; min-height: 200px;" v-loading="signalsRadio1.loading" element-loading-text="加载中...">
            <el-table v-if="signalsRadio1.T_lxrLiss.length > 0" :data="signalsRadio1.T_lxrLiss.slice(lxrq, lxrh)" style="width: 100%"
                :header-cell-style="{ backgroundColor: '#E6E9FF', color: '#333' }">
                <el-table-column label="联系人姓名">
                    <template #default="{ row }">
                        <span v-if="row.dhly == '1'">{{ row.xmlx }}</span>
                        <span v-if="row.dhly == '2'">{{ row.zblx}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="联系人角色">

                    <template #default="{ row }">
                        {{ lianxirn(row.dhly) }}
                    </template>
                </el-table-column>
                <el-table-column label="电话">

                    <template #default="{ row }">
                        <span v-if="row.dhly == '1'">{{ row.xmdh }}</span>
                        <span v-if="row.dhly == '2'">{{ row.zbdh }}</span>
                        <span v-if="row.dhly == '3'">{{ row.dldh }}</span>

                    </template>
                </el-table-column>
                <el-table-column label="相关产品">
                    <template #default="{ row }">
                        <div style="display: flex;">
                            <span style="margin-right: 20px;" v-for=" i in row.products.slice(0, 1)"
                                :key="i.doc_count">{{
            i.names[0] }}</span>
                            <div v-if="row.products.length > 1" class="more" @click="moreGd(row.product)">更多</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="项目地区" align="center">
                    <template #default="{ row }">
                        {{ diqu(row.provinceid) }}
                    </template>
                </el-table-column>
                <el-table-column label="来源" align="center">
                    <template #default="{ row }">
                        {{ informations(row.infoid) }}
                    </template>
                </el-table-column>
                <el-table-column label="最新项目时间">
                    <template #default="{ row }">
                        {{ timestamp(row.release_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="公司名称">

                    <template #default="{ row }">
                        <span v-if="row.dhly == '1'">{{ row.xmdw }}</span>
                        <span v-if="row.dhly == '2'">{{ row.zbdw}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-empty v-show="signalsRadio1.T_lxrLiss.length == undefined" description="暂无数据" />
        </div>
        <div style="display: flex; justify-content: space-between;padding: 0 20px 20px 0;">
            <div></div>
            <el-pagination small background layout="prev, pager, next" :total="signalsRadio1.T_lxrLiss.length" class="mt-4"
                @current-change="handleCurrentChange" @next-click="nextclick" @prev-click="prevclick" />
        </div>
        <el-dialog v-model="dialogVisible" title="产品列表" width="30%" :before-close="handleClose">
            <div class="infordisplay">
                <span class="cate_label" v-for="item in boxes">{{ item.key }}</span>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRadio1Store } from "@/pain/search/search";
import { timestamp, diqu, money } from "@/utils/index";
import { getCaricatureApi } from "@/Api/shoop/index.js";
const signalsRadio1 = useRadio1Store();
const dialogVisible = ref(false)
let inforLiss = ref([]);
const getInformation = () => {
    getCaricatureApi().then((res) => {
        let {
            data: { data },
        } = res;
        inforLiss.value = data;
        console.log('中百欧', inforLiss)
    });
}
getInformation();
const informations = (id) => {
    let infor = inforLiss.value.filter(res => res.infoid == id)
    return infor[0]?.infoname
}
const handleClose = (done) => {
    done()
}
let boxes = ref([])
const moreGd = (gd) => {
    dialogVisible.value = true
    boxes.value = gd
}

let lxrq = ref(0)
let lxrh = ref(9)
const handleCurrentChange = (val) => {
    console.log(lxrq, lxrh)
    console.log('handleCurrentChange', val)
    if (val == '1') {
        lxrq.value = (val - 1) * 10
        lxrh.value = 9
    } else if (val == '2') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '3') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '4') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '5') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '6') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '7') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '8') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '9') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '10') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '11') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '12') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '13') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '14') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '15') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '16') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '17') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '18') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '19') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '20') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    }
}


const nextclick = (val) => {
    console.log(lxrq, lxrh)
    console.log('nextclick', val)
    if (val == '1') {
        lxrq.value = (val - 1) * 10
        lxrh.value = 9
    } else if (val == '2') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '3') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '4') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '5') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '6') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '7') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '8') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '9') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '10') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '11') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '12') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '13') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '14') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '15') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '16') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '17') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '18') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '19') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    } else if (val == '20') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value + 10
    }
}
const prevclick = (val) => {
    console.log(lxrq, lxrh)
    if (val == '1') {
        lxrq.value = (val - 1) * 10
        lxrh.value = 9
    } else if (val == '2') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value - 10
    } else if (val == '3') {
        lxrq.value = (val - 1) * 10
        lxrh.value = lxrq.value - 10
    } else if (val == '4') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '5') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '6') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '7') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '8') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '9') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '10') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '11') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '12') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '13') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '14') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '15') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '16') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '17') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '18') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '19') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    } else if (val == '20') {
        lxrq.value = lxrh.value
        lxrh.value = lxrq.value - 10
    }
}


const lianxirn = (dhly) => {
    if (dhly == '1') {
        return '中标代理人'
    } else if (dhly == '2') {
        return '招标代理人'
    } else if (dhly == '3') {
        return '代理代理人'
    }
}
const funct = () => {
    let daochu = JSON.parse(localStorage.getItem("daochu"))
    const ditu = JSON.parse(localStorage.getItem("ditu"));
    let list = {
      ...daochu,
      ...ditu
    }
    signalsRadio1.getcontact(list)
}
funct()
onMounted(() => {
});
</script>

<style lang="scss" scoped>
.more {
    margin-left: 15px;
    color: #5473DA;
}

.w {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
}

.btitle {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #eeeeee;
}

.infordisplay {
    display: flex;
    flex-wrap: wrap;
    // max-height: 400px;
    overflow: auto;
    padding: 16px 24px;

    .cate_label {
        margin-right: 10px;
        margin-bottom: 8px;
        padding: 2px 5px;
        border-radius: 5px;
        font-size: 14px;
        background: rgba(0, 143, 147, .1);
        color: #6675FF;
    }
}

::v-deep .el-dialog__body {
    height: 100%;
}
</style>